<template>
  <div class="dialogBox">
    <el-dialog v-model="props.dialogVisible" :title="state.title" :before-close="closeDialog">
      <div class="model-parameter">
        <!-- 产汇流 -->
        <div class="confluence-box">
          <span class="confluence-title">产流参数</span>
          <div class="confluence-main" v-if="paramsDetail.clParams">
            <!-- 模型参数 -->
            <div class="parameter-model">
              <span class="parameter-model-title">模型参数</span>
              <div class="parameter-model-text">
                <el-input v-model="paramsDetail.clParams.params" type="textarea" placeholder="模型参数" />
              </div>
            </div>
            <!-- 参数说明 -->
            <div class="parameter-explain">
              <span class="parameter-explain-title">参数说明</span>
              <div class="parameter-explain-text">
                <el-input v-model="paramsDetail.clParams.paramsDesc" type="textarea" placeholder="参数说明" />
              </div>
            </div>
          </div>
          <span class="confluence-title">河道演进参数</span>
          <div class="confluence-main w200" v-if="paramsDetail.hlParams">
            <!-- 河道演进汇流参数 -->
            <div class="parameter-model">
              <span class="parameter-model-title">河道演进汇流参数</span>
              <div class="parameter-model-text">
                <el-input v-model="paramsDetail.hlParams.params" type="textarea" placeholder="模型参数" />
              </div>
            </div>
            <!-- 参数说明 -->
            <div class="parameter-explain">
              <span class="parameter-explain-title">参数说明</span>
              <div class="parameter-explain-text">
                <el-input v-model="paramsDetail.hlParams.paramsDesc" type="textarea" placeholder="参数说明" />
              </div>
            </div>
          </div>
        </div>
        <!-- 河道演进 -->
        <div class="evolution-box">
          <div class="evolution-main">
            <div class="evolution-main-bottom">
              <el-tabs v-model="activeParams" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="单元出口到预报断面汇流参数" name="first">
                  <div class="unit-section" v-if="paramsDetail.evolParams">
                    <!-- 计算单元 -->
                    <div class="river-course">
                      <div class="computed-title">
                        <span class="computed-title-left">计算单元编码</span>
                        <span class="computed-title-right">名称</span>
                      </div>
                      <div class="river-course-main">
                        <div :class="['computed-item', currentUnit === index ? 'active' : '']" :key="index"
                          v-for="(item, index) in paramsDetail.evolParams.unitEvol" @click="handleClickCd(item, index)">
                          <span class="computed-item-num">{{ item.clcd }}</span>
                          <el-tooltip :content="item.clnm" placement="top" :disabled="item.clnm.length < 5">
                            <span class="computed-item-name">{{ item.clnm }}</span>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                    <!-- 模型参数 -->
                    <div class="bottom-model-params">
                      <span class="model-title">模型参数</span>
                      <div class="model-params">
                        <el-input v-model="paramsDetail.evolParams.unitEvol[currentUnit].params" type="textarea"
                          placeholder="" />
                      </div>
                      <span class="model-title">模型说明</span>
                      <div class="model-params">
                        <el-input v-model="paramsDetail.evolParams.unitEvol[currentUnit].paramsDesc" type="textarea"
                          placeholder="" />
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="入流站到预报断面汇流参数" name="second">
                  <div class="unit-section" v-if="paramsDetail.evolParams.inEvol.length">
                    <!-- 演进河道 -->
                    <div class="river-course">
                      <div class="river-course-title">演进河道</div>
                      <div class="river-course-main">
                        <span :class="['river-item', currentRiver === index ? 'active' : '']" :key="index"
                          v-for="(item, index) in paramsDetail.evolParams.inEvol"
                          @click="handleClickRiver(item, index)">{{ item.blknm }}</span>
                      </div>
                    </div>
                    <!-- 模型参数 -->
                    <div class="bottom-model-params">
                      <span class="model-title">模型参数</span>
                      <div class="model-params">
                        <el-input v-model="paramsDetail.evolParams.inEvol[currentRiver].params" type="textarea"
                          placeholder="" />
                      </div>
                      <span class="model-title">模型说明</span>
                      <div class="model-params">
                        <el-input v-model="paramsDetail.evolParams.inEvol[currentRiver].paramsDesc" type="textarea"
                          placeholder="" />
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button type="primary" @click="registerBtn"> 确定 </el-button> -->
          <el-button type="primary" @click="closeDialog()">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onUnmounted, reactive, ref } from 'vue'
import pagiNation from '@/components/app-pagination/pagination.vue'
import {
  getXajForecastSectionInfo,
  getXajUnitPP,
  getXajRiverParams
} from '@/services/modules/model-config'
import emitter from '@/utils/bus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  paramsDetail: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const registerBtn = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      closeDialog()
    } else {
      return
    }
  })
}
const activePlan = ref('first')
const activeParams = ref('first')
let textarea = reactive({
  text: ''
})
const currentCd = ref(0) //默认选中计算单元
const currentUnit = ref(0)
const currentRiver = ref(0)
const state = reactive({
  title: '方案参数',
  blkcd: '', //断面Id
  schemeName: '',
  upSectionArr: [], //入流信息
  rainTableData: [], //雨量计算单元
  unitTableData: [], //计算单元信息
  paramsOptions: [], //方案
  unitParams: {}, //产汇流参数
  riverParams: {}, //河道演进参数
  outParams: {},
  inParams: {}
})
emitter.on('secInfo', async (value) => {
  await getXajForecastSectionInfo({ blkcd: value.id }).then((res) => {
    if (res.code === 200) {
      state.unitTableData = res.data.xajUnits
      state.paramsOptions = res.data.paramsSchemes
      state.schemeName = res.data.paramsSchemes[0].schemeName
      state.unitParams = res.data.unitParams
      state.riverParams = res.data.riverParams
      state.upSectionArr = res.data.upSection
      state.blkcd = res.data.blkcd
    }
  })
  await handleClickUnit(state.unitTableData[0], 0)
  await handleClickCd(state.unitTableData[0], 0)
  await handleClickRiver(state.upSectionArr[0], 0)
})
onUnmounted(() => {
  emitter.off('secInfo')
})
//改变
function changeVal(value) {
  state.schemeName = value
}
//点击计算单元编码
function handleClickUnit(item, index) {
  currentCd.value = index
  getXajUnitPP({ clcd: item.clcd }).then((res) => {
    if (res.code === 200) {
      state.rainTableData = res.data
    }
  })
}
//
function handleClickCd(item, index) {
  currentUnit.value = index
  getXajRiverParams({ blkcd: item.blkcd, inCode: item.clcd }).then((res) => {
    if (res.code === 200) {
      state.outParams = res.data
    }
  })
}
function handleClickRiver(item, index) {
  currentRiver.value = index
  getXajRiverParams({ blkcd: state.blkcd, inCode: item.inBlkcd }).then((res) => {
    if (res.code === 200) {
      state.inParams = res.data
    }
  })
}
</script>
<style lang="less" scoped>
.model-parameter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 800px;
  padding: 0 5px;
  box-sizing: border-box;
  :deep(.el-textarea__inner) {
    resize: none;
  }
  .confluence-box {
    width: 320px;
    height: 100%;
    .confluence-title {
      display: inline-block;
      height: 20px;
      font-weight: 600;
    }
    .confluence-main {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 380px);
      padding: 0 10px;
      margin-top: 5px;
      box-sizing: border-box;
      &.w200 {
        height: calc(100% - 400px);
      }
      .parameter-model {
        width: 48%;
        .parameter-model-title {
          display: block;
          height: 25px;
          line-height: 25px;
        }
        .parameter-model-text {
          width: 100%;
          height: calc(100% - 45px);
          margin-top: 5px;
        }
      }
      .parameter-explain {
        width: 48%;
        .parameter-explain-title {
          display: block;
          height: 25px;
          line-height: 25px;
        }
        .parameter-explain-text {
          width: 100%;
          height: calc(100% - 45px);
          margin-top: 5px;
        }
      }
    }
  }
  .evolution-box {
    width: calc(100% - 330px);
    height: 100%;
    .evolution-title {
      display: inline-block;
      height: 20px;
      font-weight: 600;
    }
    .evolution-main {
      height: calc(100% - 25px);
      padding: 0 10px;
      box-sizing: border-box;
      margin-top: 10px;
      .evolution-main-top {
        display: flex;
        justify-content: space-between;
        height: 100px;
        .river-params {
          width: 43%;
          .river-params-title {
            display: block;
            height: 20px;
          }
          .river-params-text {
            height: 82px;
          }
        }
        .params-explain {
          width: 55%;
          .params-explain-title {
            display: block;
            height: 20px;
          }
          .params-explain-text {
            height: 82px;
          }
        }
      }
      .evolution-main-bottom {
        height: calc(100% - 20px);
        .el-tabs__header {
          margin-bottom: 0px;
        }
        .unit-section {
          display: flex;
          justify-content: space-between;
          height: calc(100% - 15px);
          .river-course {
            width: 47%;
            height: 100%;
            .computed-title {
              display: flex;
              justify-content: space-between;
              height: 20px;
              line-height: 20px;
              padding: 0 8px;
              background-color: #f2f2f2;
            }
            .river-course-title {
              width: 100%;
              height: 20px;
              background-color: #f2f2f2;
              line-height: 20px;
              text-align: center;
            }
            .river-course-main {
              overflow-y: auto;
              height: calc(100% - 10px);
              background: #d7d4d427;
              .river-item {
                display: block;
                height: 30px;
                width: 100%;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                &.active {
                  background: #f2f2f2;
                  color: #0054db;
                }
              }
              .computed-item {
                display: flex;
                justify-content: space-between;
                height: 25px;
                padding: 2px 10px;
                line-height: 25px;
                text-align: center;
                cursor: pointer;
                &.active {
                  background: #f2f2f2;
                  color: #0054db;
                }
                .computed-item-name {
                  width: 60px;
                  display: inline-block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .bottom-model-params {
            width: 50%;
            height: 100%;

            .model-title {
              display: block;
              height: 20px;
            }
            .model-params {
              height: calc((100% - 28px) / 2);
            }
          }
        }
      }
    }
  }
  :deep(.el-textarea),
  :deep(.el-textarea__inner),
  :deep(.el-tabs),
  :deep(.el-tabs__content),
  :deep(.el-tab-pane) {
    height: 100%;
  }
}
</style>
